<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>车队详情</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	
    <!-- Custom CSS -->
    <link href="css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="css/plugins/morris.css" rel="stylesheet">
	<link href="nuget/content/content/toastr.css" rel="stylesheet" type="text/css"/>
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<!-- tab table-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_i0327076nave7b9.css"/>
    <link rel="stylesheet" type="text/css" href="css/datatable.css"/>
    <style>
    	#allmap {
			height: 600px;
			overflow: hidden;
			margin:0;
			font-family:"微软雅黑";
		}
		#example_paginate{
			float:right;
		}
		.handle-btn{
			cursor: pointer;
		    margin: 0 2px;
		}
		#wrapper {
		    padding-left:0px;
		}
		.navigation{
			border-bottom: 3px solid #edebeb;
		}
		.navigation a:hover{
			color: #0F6AFC;
			border-bottom: 2px solid #01AAED;
		}
		.this{
			color: #01aaed;
			font-weight:bold;
			border-bottom: 2px solid #01AAED;
		}
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" style=" width:225px;">
                <a class="navbar-brand" href="index.html">无人车管理系统</a>
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                 <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 用户名 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="refereePwd.html"><i class="fa fa-fw fa-gear"></i> 修改密码</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="login.html"><i class="fa fa-fw fa-power-off"></i> 退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            
            <!-- /.navbar-collapse -->
        </nav>

        <div id="page-wrapper">

            <div class="container-fluid">
				<div class="row sss">
					<nav class="navbar navbar-default" role="navigation">
						<div>
							<ul class="nav navbar-nav">
								<li><a href="index.html">首页</a></li>
								<li class="active"><a href="javascript:;">实时信息</a></li>
							</ul>
						</div>
					</nav>
				</div>
                <!-- /.row -->
                <div class="row">
                	<div class="panel ">
                        <div class="panel-heading">
                        	<ul class="nav" v-cloak>
                        		<li>车队名称：{{dataObj.teamName}}</li>
                        		<li>
                        			来自：{{dataObj.teamOrganization}}，联系人：{{dataObj.teamLeader}}，联系电话：{{dataObj.teamPhone}}，
                        		</li>
                        		
                        	</ul>
                        </div>
                        <div class="panel-body">
                        	<div class="col-lg-7">
		                        <div class="panel panel-default">
		                            <div class="panel-heading">
		                                <h3 class="panel-title"><i class="fa fa-clock-o fa-fw"></i> 实时成绩</h3>
		                            </div>
		                            <div class="panel-body">
		                                <div class="table">
		                                    <table id="realTime" class="display" width="100%"></table>
		                                </div>
		                                <div class="text-right">
		                                    <a href="#">more <i class="fa fa-arrow-circle-right"></i></a>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="col-lg-5">
		                        <div class="panel panel-default">
		                            <div class="panel-heading">
		                                <h3 class="panel-title"><i class="fa fa-money fa-fw"></i> 违规信息</h3>
		                            </div>
		                            <div class="panel-body">
		                                <div class="table">
		                                	<table id="Illegal" class="display" width="100%"></table>
		                                </div>
		                                <div class="text-right">
		                                    <a href="#">more <i class="fa fa-arrow-circle-right"></i></a>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="col-lg-12">
		                        <div class="panel panel-default">
		                            <div class="panel-heading">
		                                <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i> 故障支援</h3>
		                            </div>
		                            <div class="panel-body">
		                                <div id="allmap"></div>
		                                <div class="text-right">
			                                <a href="#">more <i class="fa fa-arrow-circle-right"></i></a>
			                            </div>
		                            </div>
		                            
		                        </div>
		                    </div>
                        </div>
                   </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

   
	    <!-- /#wrapper -->
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="RefereeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							 添加场景
						</h4>
					</div>
					<div class="modal-body">
	                    <div class="panel-body">
	                       <form class="form-horizontal" id="teamform" method="get">
	                              <div class="form-group">
	                              	  <input  name="teamId" type="hidden" :value="dataObj.teamId"/>
	                                  <label class="col-sm-2 control-label">车队名称</label>
	                                  <div class="col-sm-10">
	                                      <input type="text" name="teamName"  class="form-control" :value="dataObj.teamName">
	                                  </div>
	                              </div>
	                              <div class="form-group">
	                                  <label class="col-sm-2 control-label">参赛单位</label>
	                                  <div class="col-sm-10">
	                                      <input type="text" name="teamOrganization" :value="dataObj.teamOrganization" class="form-control">
	                                  </div>
	                              </div>
	                              <div class="form-group">
	                                  <label class="col-sm-2 control-label">联系人</label>
	                                  <div class="col-sm-10">
	                                      <input type="text" name="teamLeader" :value="dataObj.teamLeader" class="form-control">
	                                  </div>
	                              </div>
	                              <div class="form-group">
	                                  <label class="col-sm-2 control-label">联系方式</label>
	                                  <div class="col-sm-10">
	                                      <input type="text" name="teamPhone" :value="dataObj.teamPhone" class="form-control">
	                                  </div>
	                              </div>
                        	</form>
	                    </div>
					</div>
					<div class="modal-footer">
						<button type="button" v-on:click="Submit()" class="btn btn-primary">
							提交更改
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	 </div>	
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
	<!-- tab table-->
	<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
	<script src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
	<!-- device-->
	<script src="nuget/content/scripts/toastr.js"></script>
	<script type="text/javascript" src="js/common.js" ></script>
    <script type="text/javascript" src="js/vue/vue.js" ></script>
    <script type="text/javascript" src="js/vue/vue-router.js" ></script>
	<script type="text/javascript" src="js/realTime.js"></script>
	<script type="text/javascript" src="js/Illegal.js"></script>
	<!--百度地图-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG"></script>
	<script>

		var vue = new Vue({
			el: '#page-wrapper',
			data: {
				competitionDate: getQueryString("date",window.location.href), //比赛日期
				map : new BMap.Map("allmap"),    // 创建Map实例1e0u2fDgqYhUdilCb10Lz7xHyTBf99hG
				ak:"oFFbDGImbvjgN0vlfviMxIzh6GD82tqq",
				service_id:146128,
				locationUrl:"http://yingyan.baidu.com/api/v3/track/gettrack?" +
				"service_id=146128&ak=oFFbDGImbvjgN0vlfviMxIzh6GD82tqq&coord_type_output=bd09ll"+
				//"&start_time=1500566400" +
				//"&end_time=1500619528" +
				//"&entity_name=1"+
				"&process_option=need_denoise=1" +//need_denoise =0：不去噪 need_denoise =1：去噪
				",need_vacuate=1" +//need_vacuate =0：不抽稀 need_vacuate=1：抽稀
				",radius_threshold=0" +//定位精度过滤，用于过滤掉定位精度较差的轨迹点，每个轨迹点示例：radius_threshold=0：不过滤
										// radius_threshold=20：当取值大于0的整数时，则过滤掉radius大于20的轨迹点。 通常 GPS 定位精度不超过20米，Wi-Fi 定位精度不超过100米
				",need_mapmatch=1" +//need_mapmatch=0：不绑路need_mapmatch=1：绑路
				",transport_mode=driving" +//
				"&is_processed=1",//0：关闭轨迹纠偏，返回原始轨迹
								  //1：打开轨迹纠偏，返回纠偏后轨迹。打开纠偏时，请求时间段内轨迹点数量不能超过2万，否则将返回错误。
				teamInfo:{},
				dataObj:{},
				marker:null,
				polyline:null,
			},
			mounted: function () {
				this.init();
			},
			methods: {
				init: function () {
					drawScenesResultTable(teamId);
					drawIllegalResultTable(teamId);
					var _self = this;
					$.ajax({
						type: "get",
						url: url +'/users/'+adminId+'/teams/'+teamId,
						async: false,
						dataType: 'json',
						contentType: "application/json; charset=utf-8",
						beforeSend: function(request) {
							request.setRequestHeader("accessToken", accessToken);
						},
						success: function(data) {
							_self.dataObj = {};
							var result = data.result;
							_self.dataObj = result;
							_self.teamInfo=result;
							_self.drawPoint();
							setInterval('vue.drawPoint()',3000);
						}
					});

				},
				drawPoint:function () {
					_self=this;
					var startTime;
					var endTime;
					var todayStamp=new Date(replaceDate()).getTime()/1000;
					if(this.competitionDate==null){
						startTime=todayStamp;
						endTime=parseInt(new Date().getTime()/1000);//当前时间
					}else {
						var competitionDateStamp=new Date(this.competitionDate).getTime()/1000;
						startTime=competitionDateStamp;//比赛日零点
						endTime=competitionDateStamp+60*60*24-1;//比赛日24点
					}
					$.ajax({
						type:'get',
						url:this.locationUrl+"&entity_name="+this.teamInfo.teamId+"&start_time="+startTime+"&end_time="+endTime,
						dataType:'jsonp',
						async:true,
						processData: false,
						success:function(data){
							if(data.status==0){
								map.removeOverlay(_self.marker);
								map.removeOverlay(_self.polyline);
								var points=data.points;
								var polyPoints=[];
								for(var i=0;i<points.length;i++){
									polyPoints.push(new BMap.Point(points[i].longitude, points[i].latitude));
								}
								_self.polyline = new BMap.Polyline(polyPoints, {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5});   //创建折线
								map.addOverlay(_self.polyline);   //增加折线

								var endPoint=points.pop();
								var startPoint=data.start_point;
								var longitude=endPoint.longitude;
								var latitude=endPoint.latitude;
								var direction=endPoint.direction;
								var modify_time=endPoint.create_time;
								var centerLongitude=(startPoint.longitude+endPoint.longitude)/2;
								var centerLatitude=(startPoint.latitude+endPoint.latitude)/2;
								var d1 = new Date(modify_time);
								var d2 = new Date();
								var time=parseInt(d2 - d1) / 1000;//两个时间相差的秒数
								var deviceState;
								if(time<(60*10)){
									deviceState=1;
								}else{
									deviceState=0;
								}
								var myIcon= new BMap.Icon((deviceState==1)?("img/car_online.png"):("img/car.png"), new BMap.Size(41,34));
								var point = new BMap.Point(longitude,latitude);
								var opts = {
									width : 200,     // 信息窗口宽度
									height: 100,     // 信息窗口高度
									title : "车辆信息" , // 信息窗口标题
									enableMessage:true,//设置允许信息窗发送短息
									message:"提示信息"
								}
								if(!_self.marker)
									map.centerAndZoom(new BMap.Point(centerLongitude,centerLatitude), 18); // 初始化地图,设置中心点坐标和地图级别
								var pt = new BMap.Point(longitude, latitude);
								_self.marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
								_self.marker.addEventListener("click", function(){
									var infoWindow = new BMap.InfoWindow("车队名称:"+_self.teamInfo.teamName+",上传时间："+modify_time+",行驶距离"+parseInt(data.distance)+"米");
									map.openInfoWindow(infoWindow,point); //开启信息窗口
								});
								_self.marker.setRotation(direction);
								map.addOverlay(_self.marker);
							}else{}
						},
					});
				}
			},
		});
		var map = new BMap.Map("allmap");    // 创建Map实例
		map.centerAndZoom(new BMap.Point(120.772644, 31.592812), 13);  // 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
		
	</script>
</body>

</html>
